<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>User</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../jquery.serializejson.min.js"></script>

</head>

<body>




    <div class="easyui-panel" style="padding:5px;">
        <a href="#" class="easyui-linkbutton" onclick="changeType(1)" data-options="toggle:true,group:'g1'">产品分类</a>
        <a href="#" class="easyui-linkbutton" onclick="changeType(2)" data-options="toggle:true,group:'g1'">新闻分类</a>
        <a href="#" class="easyui-linkbutton" onclick="changeType(3)" data-options="toggle:true,group:'g1'">上传分类</a>
        <a href="#" class="easyui-linkbutton" onclick="changeType(4)" data-options="toggle:true,group:'g1'">地区分类</a>
        <a href="#" class="easyui-linkbutton" onclick="changeType(5)" data-options="toggle:true,group:'g1'">用户等级</a>
        <a href="#" id="addRoot" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加根节点</a>
        <a href="#" id="addRootm" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加子节点</a>
        <a href="#" id="removeTree" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除数据</a>

    </div>
    <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed: true" style="width:400px;height:200px;padding:10px">
        <form id="ff" autocomplete="off" class="easyui-form" method="post" data-options="novalidate:true" style="padding: 5px 10px">
            <input id="type" name="type" style="width:50%">
            <input id="parentId" name="parentId" style="width:50%">
    
            <div style="margin-bottom:20px">
                <input id="fenlei"  class="easyui-textbox"name="text" style="width:50%" data-options="label:'分类名称:',required:true">
            </div>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>








    <ul id="tt"></ul>





    <script>
        var global_id=0;
        function changeType(type) {
            initTree(type);
            $("#parentId").val(0);
        }

        function initTree(type) {
            $('#tt').tree({
                url: 'http://localhost:3000/cate/list/' + type,
                method: 'get',

                onClick: function (node) {
                    $("#parentId").val(node._id);
                    global_id = node._id;

                }
            });
            $("#type").val(type);
        }

        initTree(1);

        $("#addRoot").click(function () {
            $("#parentId").val(0);
        })

        $("#removeTree").click(function () {
            $.ajax({
                url: 'http://localhost:3000/cate/data/' + global_id,
                method: 'delete'
            }).done(function (res) {
                console.log(res);
            })
            $("#tt").tree('reload');
        })

        function submitForm() {
            $('#ff').form('submit', {
                onSubmit: function () {
                    if ($(this).form('enableValidation').form('validate')) {

                        var postData = $("#ff").serializeJSON()

                        // parentId === 0的时候需要将parentId这个节点给删除
                        if (postData.parentId === '0') {
                            delete postData.parentId;

                        }

                        $.ajax({
                            url: 'http://localhost:3000/cate/data',
                            type: 'post',
                            data: postData
                        }).done(function (res) {
                            $("#tt").tree('reload')
                        })
                        
                        $('#_easyui_textbox_input1').val('');
                    }
                    $('#dlg').dialog('close');
                    return false;
                }
                
            });
        }
        function clearForm() {
            $('#ff').form('clear');
        }
        $('#addRoot').click(function(){
            $('#dlg').dialog('open');
        })
        $('#addRootm').click(function(){
            $('#dlg').dialog('open');
        })
    </script>
</body>

</html>